<template>
  <div class="wrap">
    <div class="introduce">
      <p>{{ title }}</p>
      <span>poster design</span>
    </div>
    <div class="login">
      <h1>欢迎登陆</h1>
      <span class="xiahua"></span>
      <div class="info-input">
        <el-input v-model="username" placeholder="请输入用户名" prefix-icon="el-icon-user-solid" maxlength="50" v-trim/>
        <el-input v-model="password" placeholder="请输入密码" type="password" prefix-icon="eva-icon-password"
                  maxlength="30" show-password/>
        <span @click="login" @keypress.enter="login"></span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import api from '@/api'
import useNotification from "@/common/methods/notification";
import Cookies from "js-cookie";
let title = ref('小源AI海报设计')
let username = ref('')
let password = ref('')

async function login() {
  console.info(username.value, password.value)
  const loginResult = await api.home['loginByPassword']({username: username.value, password: password.value})
  if (loginResult.token) {
    Cookies.set("X-Access-Token",loginResult.token)
    location.href = "/"
  }else if (!loginResult.success) {
    useNotification('登录失败', loginResult.message, {type: 'error'})
  }
  console.info(loginResult)
}


</script>


<style scoped>

html,
body {
  overflow: auto;
}

.wrap {
  width: 100%;
  height: 100vh;
  background-image: url("@/assets/images/bj3.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-clip: content-box;
  background-position: center;
  position: relative;
  overflow: auto;
}

.wrap .introduce {
  width: 100%;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  margin-top: 10%;
}

.wrap .introduce p {
  font-size: 48px;
  margin-top: 50px;
  font-weight: 300;
  color: #fafafa;
  margin: 0;
}

.wrap .introduce span {
  font-size: 24px;
  font-weight: 300;
  margin: 0;
}

.wrap .introduce img {
  width: 82px;
  height: 78px;
}

.wrap .login {
  height: 450px;
  width: 80%;
  min-width: 460px;
  flex-shrink: 0;
  text-align: center;
  background-size: 100% 100%;
  padding: 0 80px;
  box-sizing: border-box;
  margin: 7vh auto;
}

.wrap .login h1 {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  line-height: 20px;
}

.wrap .login .info-input {
  width: 65%;
  margin: 0 auto;
  margin-top: 30px; /* replaced $input-gap */
  margin-bottom: 60px;
  display: flex;
  align-items: center;
}

.wrap .login .info-input .el-input {
  margin-top: 30px;
  width: 340px;
  margin: 0 10px 0 65px;
}

.wrap .login .info-input .el-input .el-input__inner {
  height: 50px;
  background: rgba(255, 255, 255, 0.3);
  background-size: 100% 100%;
  border: none;
  color: #fff;
  font-size: 18px;
}

.wrap .login .info-input span {
  padding: 20px 24px;
  background: url('@/assets/images/login.png') no-repeat;
  background-size: 100%;
}

.wrap .login .xiahua {
  display: inline-block;
  width: 2vw;
  height: 2px;
  background-color: #fff;
}

.wrap .login .el-button {
  height: 50px;
  width: 100%;
  color: #fff;
  font-size: 16px;
  border: none;
  background: linear-gradient(130deg, var(--primary-color) +20 0%, var(--primary-color) -20 100%);
}


</style>
